<!--
  Generated template for the ModifyDataPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>
      <button class="back" (click)="dismiss()">
          <ion-icon name="ios-arrow-back"></ion-icon>
      </button>
      <p text-center>更改目的</p>
      <button class="save" (click)="saveTarget()">
          <span>保存</span>
      </button>
    </ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
    <ion-list class="first_list">
      <ion-item class="border_bottom_e8e8e8">
        <p class="puff_left item_title">我的目的</p>
        <div class="puff_right modify_purpose" id="modify_purpose">
          <span class="purpose" *ngFor="let myPurpose of getMyPurpose">{{myPurpose}}<ion-icon name="md-close-circle" (click)="removePurpose($event)"></ion-icon></span>
        </div>
      </ion-item>
      <ion-item>
        <h2 class="item_title" style="width: 100%">添加目的<span style="font-size: 1.3rem">（最多选择3个）</span><button ion-button class="puff_right addmyself" style="margin: 0;height: 2.2rem;" (click)="showPrompt()">自定义</button></h2>
        <p style="font-size: 1.4rem;line-height: 3rem;">娱乐类</p>
        <div class="purposes clearfix">
          <span (click)="addThisPurpose($event)">治国安</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
          <span (click)="addThisPurpose($event)">治国</span>
          <span (click)="addThisPurpose($event)">治国安</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
          <span (click)="addThisPurpose($event)">治国安</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
          <span (click)="addThisPurpose($event)">治国安邦</span>
        </div>
        <p style="font-size: 1.4rem;line-height: 3rem;">娱乐类</p>
        <div class="purposes clearfix">
          <span>治国安</span>
          <span>治国安邦</span>
          <span>治国</span>
          <span>治国安</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
          <span>治国安</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
        </div>
        <p style="font-size: 1.4rem;line-height: 3rem;">娱乐类</p>
        <div class="purposes clearfix">
          <span>治国安</span>
          <span>治国安邦</span>
          <span>治国</span>
          <span>治国安</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
          <span>治国安</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
          <span>治国安邦</span>
        </div>
      </ion-item>
    </ion-list>
</ion-content>

